<template>
  <div>
    <s-title text="公共安全"></s-title>
    <div class="publicSafetycon">
      <div class="psxxgd">
        <div class="psTitle">
          <span class="name">{{ xxgd.name }}</span>
          <span class="value">{{ xxgd.value }}</span>
        </div>
        <div class="psxxgdcon">
          <div
            class="psxxgdcon-item"
            v-for="(item, index) in xxgd.list"
            :key="index"
          >
            <p class="name">{{ item.name }}</p>
            <p class="value">{{ item.value }}</p>
          </div>
        </div>
      </div>

      <div class="blmq">
        <div class="psTitle">
          <span class="name">{{ blmq.name }}</span>
          <span class="value">{{ blmq.value }}</span>
        </div>
        <div class="psblmqcon">
          <!-- <div class="psblmqcom-left">
            <div class="psblmqcom-left-value">608</div>
          </div> -->
          <div class="psblmqcom-right">
            <div class="psblmqcom-right-top">
              <div
                class="psblmqcom-right-top-box"
                v-for="(item, index) in blmq.list"
                :key="index"
              >
                <div class="psblmqcom-right-top-icon">{{ index + 1 }}</div>

                <div class="psblmqcom-right-top-name">{{ item.useNature }}</div>
                <div class="psblmqcom-right-top-value">{{ item.count }}</div>
                <div class="psblmqcom-right-top-value">
                  {{ Math.floor(item.ratio * 100) + "%" }}
                </div>
              </div>
            </div>
            <vue-seamless-scroll
              :class-option="classOption"
              class="psblmqcom-right-bottom"
              :data="blmq.desc"
            >
              <div
                class="psblmqcom-right-content-box"
                v-for="(item, index) in blmq.desc"
                :key="index"
              >
                <div class="psblmqcom-right-content-icon">{{ index + 4 }}</div>
                <div class="psblmqcom-right-content-name">
                  {{ item.useNature }}
                </div>
                <div class="psblmqcom-right-content-value">
                  {{ item.count }}
                </div>
                <div class="psblmqcom-right-content-value">
                  {{ Math.floor(item.ratio * 100) + "%" }}
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>

      <div class="dzdp">
        <el-tooltip
          class="item"
          effect="dark"
          content="点击店招店牌撒点"
          placement="top-start"
        >
          <div
            :style="dzdpclickflag ? ' color:yellow' : ''"
            class="psTitle"
            @click="dzdppoint"
          >
            <span class="name">{{ dzdp.name }}</span>
            <span class="value">{{ dzdp.value }}</span>
          </div>
        </el-tooltip>
        <div class="psdzdpcon">
          <div id="psdzdpEchart"></div>
        </div>
      </div>

      <div class="ymjz">
        <div class="psTitle">
          <span class="name">{{ ymjz.name }}</span>
          <span class="value">{{ ymjz.value }}</span>
        </div>
        <div class="psymjzcon">
          <div
            class="psymjzcon-item"
            v-for="(item, index) in ymjz.list"
            :key="index"
          >
            <p class="value">{{ item.value }}</p>
            <p class="font">{{ item.font }}</p>
            <p class="name">{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sTitle from "../../common/sTitle.vue";
import {
  listDianZhaoDianPai,
  getAllHpDianZhaoDianPaiInfoByCondition,
  getGlassWall,
} from "../../../utils/api";
import map from "../../../assets/map";
export default {
  name: "publicSafety",
  components: {
    sTitle,
  },
  data() {
    return {
      xxgd: {
        name: "小型工程",
        value: 62,
        list: [
          {
            name: "发现",
            value: 62,
          },
          {
            name: "受理",
            value: 62,
          },
          {
            name: "检查",
            value: 62,
          },
          {
            name: "竣工",
            value: 55,
          },
          {
            name: "移交",
            value: 6,
          },
        ],
      },
      blmq: {
        name: "玻璃幕墙",
        value: "35",
        list: [],
        desc: [],
      },
      dzdp: {
        name: "店招店牌",
        value: "2170",
        dzdPoint: [],
        list: [
          { value: 51, name: "特大型" },
          { value: 263, name: "大型" },
          { value: 1248, name: "中型" },
          { value: 611, name: "小型" },
        ],
      },
      ymjz: {
        name: "疫苗接种",
        value: "",
        list: [
          { name: "实有人口接种", value: "25345", font: "人" },
          { name: "户籍人口接种", value: "19530", font: "人" },
          // { name: "", value: "", font: "" },
        ],
      },
      dzdpclickflag: false,
    };
  },
  mounted() {
    listDianZhaoDianPai(JSON.stringify({ street: "豫园" })).then((res) => {
      if (res.data.error_code === 0) {
        this.dzdp.value = res.data.data.list.length;
        this.dzdp.dzdPoint = res.data.data.list;
      }
    });
    getAllHpDianZhaoDianPaiInfoByCondition(
      JSON.stringify({ street: "豫园" })
    ).then((res) => {
      if (res.data.error_code === 0) {
        this.dzdp.list[0].value = res.data.data.sizelist[1].count;
        this.dzdp.list[1].value = res.data.data.sizelist[2].count;
        this.dzdp.list[2].value = res.data.data.sizelist[0].count;
        this.dzdp.list[3].value = res.data.data.sizelist[3].count;
        this.getdzdpEchart();
      }
    });
    getGlassWall(
      JSON.stringify({
        streetname: "豫园",
      })
    ).then((res) => {
      if (res.status === 200) {
        this.blmq.value = res.data.data.count;
        this.blmq.list = res.data.data.list.slice(0, 3);
        this.blmq.desc = res.data.data.list.slice(4, res.data.data.list.length);
      }
    });
  },
  methods: {
    getdzdpEchart() {
      let _echarts = this.$echarts.init(
        document.getElementById("psdzdpEchart"),
        null,
        { devicePixelRatio: 2 }
      );
      let option = {
        color: ["#00B4FF", "#2A69F9", "#FEDC85", "#58DEB6"],
        series: [
          {
            type: "pie",
            radius: [20, 70],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              normal: {
                label: {
                  show: true,

                  formatter: function (params) {
                    return (
                      "{normal|" +
                      params.name +
                      ": }\n{value|" +
                      params.value +
                      "}"
                    );
                  },
                  rich: {
                    normal: {
                      color: "#fff",
                      fontSize: 8 * tedp.mult,
                    },
                    value: {
                      color: "#F2E511",
                      fontSize: 8 * tedp.mult,
                    },
                  },
                },
                smooth: 0.2 * tedp.mult,
                labelLine: {
                  show: true,
                },
              },
            },
            data: this.dzdp.list,
          },
        ],
      };
      _echarts.setOption(option);
    },
    dzdppoint() {
      map.reductView(tedp.webGis);
      if (!this.dzdpclickflag) {
        this.dzdp.dzdPoint.map(function (val, index) {
          let model = map.addpoint(tedp.webGis, "dzdp", val,'blo','bla');
          val.modelId1 = model._id;
          val.layerType = "dzdp";
        });
        this.dzdpclickflag = true;
      } else {
        map.removePoi(tedp.webGis, "dzdp");
        this.dzdpclickflag = false;
      }
    },
  },
  computed: {
    //一些参数的配置
    classOption() {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 10000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.publicSafetycon {
  color: #fff;
  width: 100%;
  height: 510px;
}
.publicSafetycon > div {
  width: 44%;
  height: 255px;
  float: left;
  margin-left: 3%;
}
.psTitle {
  width: 100%;
  height: 40px;
  background-repeat: no-repeat;
  background-size: 150% 100%;
  text-indent: 50px;
}
.psxxgd .psTitle {
  background-image: url(~@/assets/image/right1/xxgdtitle.png);
}
.blmq .psTitle {
  background-image: url(~@/assets/image/right1/blmqtitle.png);
}
.dzdp .psTitle {
  background-image: url(~@/assets/image/right1/dzdptitle.png);
  cursor: pointer;
}
.ymjz .psTitle {
  background-image: url(~@/assets/image/right1/ymjztitle.png);
}
.psTitle .name {
  font-size: 22px;
}
.psTitle .value {
  font-size: 22px;
  color: #fedc85;
  float: right;
  font-weight: bold;
}
.psxxgdcon {
  width: 100%;
  height: 135px;
  margin-top: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(~@/assets/image/right1/xxgdcon.png);
}
.psxxgdcon-item {
  width: 45px;
  height: 80px;
  float: left;
  font-size: 15px;
  text-align: center;
}
.psxxgdcon-item:nth-child(2) {
  margin-left: 72px;
}
.psxxgdcon-item:nth-child(3) {
  margin-left: 65px;
}
.psxxgdcon-item:nth-child(4) {
  margin-left: 47px;
}
.psxxgdcon-item:nth-child(5) {
  margin-left: 72px;
}
.psxxgdcon-item .value {
  color: #fedc85;
  font-size: 19px;
  font-weight: bold;
}
.psblmqcon {
  width: 100%;
  height: 200px;
  display: flex;
}
.psblmqcom-left {
  width: 90px;
  height: 110px;
  margin: auto 0;
  background-repeat: no-repeat;
  background-size: 100% 80%;
  background-image: url(~@/assets/image/right1/psblmq.png);
}
.psblmqcom-left-value {
  width: 100%;
  height: 20;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fedc85;
  text-align: center;
}
.psblmqcom-right {
  width: 100%;
  height: 160px;
  margin-left: 5px;
  margin-top: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(~@/assets/image/right1/video-background.png);
}
.psblmqcom-right-top {
  width: 100%;
  height: 80px;
}
.psblmqcom-right-top-box {
  width: 100%;
  height: 22px;
  line-height: 22px;
  margin: 5px 0px;
  box-shadow: #0077da 0px 0px 36px inset;
  display: flex;
}
.psblmqcom-right-top-icon {
  width: 25px;
  margin: 0 5px;
  height: 25px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: center;
}
.psblmqcom-right-top-box:nth-child(1) .psblmqcom-right-top-icon {
  background-image: url(~@/assets/image/right1/sun-red.png);
}
.psblmqcom-right-top-box:nth-child(2) .psblmqcom-right-top-icon {
  background-image: url(~@/assets/image/right1/sun-orange.png);
}
.psblmqcom-right-top-box:nth-child(3) .psblmqcom-right-top-icon {
  background-image: url(~@/assets/image/right1/sun-yellow.png);
}
.psblmqcom-right-top-name {
  width: 150px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.psblmqcom-right-top-value {
  width: 40px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffd800;
}
.psblmqcom-right-bottom {
  width: 100%;
  height: 70px;
  overflow: auto;
}
.psblmqcom-right-bottom::-webkit-scrollbar {
  display: none;
}
.psblmqcom-right-content-box {
  width: 100%;
  height: 22px;
  line-height: 22px;
  margin: 5px 0px;
  display: flex;
}
.psblmqcom-right-content-icon {
  width: 20px;
  margin: 0 8px;
  height: 20px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: center;
  background-image: url(~@/assets/image/right1/blue-boll.png);
}
.psblmqcom-right-content-name {
  width: 150px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.psblmqcom-right-content-value {
  width: 40px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffd800;
}

.psdzdpcon {
  width: 100%;
  height: 250px;
}
#psdzdpEchart {
  width: 100%;
  height: 200px;
}
.psymjzcon {
  width: 100%;
  height: 150px;
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
}
.psymjzcon-item {
  width: 100px;
  height: 120px;
  text-align: center;
  background-repeat: no-repeat;
  background-size: 100% 80%;
  background-image: url(~@/assets/image/right1/ymjzitem.png);
}
.psymjzcon-item:nth-child(2) {
  margin-top: -20px;
}
.psymjzcon-item:nth-child(3) .font {
  margin-top: 40px;
}
.psymjzcon-item .value {
  font-size: 22px;
  font-weight: bold;
  color: #fedc85;
}
.psymjzcon-item .name {
  font-size: 14px;
}
.psymjzcon-item .font {
  font-size: 14px;
  color: #fedc85;
  margin-top: -20px;
}
</style>
 